/// File: app/explore.tsx
import { View, Text, StyleSheet, Image, ScrollView, TouchableOpacity } from 'react-native';

const posts = [
  {
    creator: 'Kana Yuuki',
    time: '2h ago',
    text: '剛完成了新的髮型設計，超喜歡🖤',
    image: require('../assets/logo.png'),
    avatar: require('../assets/logo.png'),
  },
  {
    creator: 'Haruto Art',
    time: '5h ago',
    text: '日系插畫分享，每天一筆✍️',
    image: require('../assets/logo.png'),
    avatar: require('../assets/logo.png'),
  },
];

export default function ExploreScreen() {
  return (
    <ScrollView style={styles.container}>
      <Text style={styles.title}>探索貼文</Text>

      {posts.map((item, index) => (
        <View key={index} style={styles.postCard}>
          <View style={styles.userRow}>
            <Image source={item.avatar} style={styles.avatar} />
            <View>
              <Text style={styles.creator}>{item.creator}</Text>
              <Text style={styles.time}>{item.time}</Text>
            </View>
          </View>
          <Text style={styles.text}>{item.text}</Text>
          <Image source={item.image} style={styles.postImage} />
          <View style={styles.actions}>
            <TouchableOpacity><Text style={styles.actionText}>❤️ 54</Text></TouchableOpacity>
            <TouchableOpacity><Text style={styles.actionText}>💬 12</Text></TouchableOpacity>
            <TouchableOpacity><Text style={styles.actionText}>🔗</Text></TouchableOpacity>
          </View>
        </View>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#0a0a0a',
    paddingTop: 60,
    paddingHorizontal: 16,
  },
  title: {
    color: '#fff',
    fontSize: 22,
    fontWeight: '600',
    marginBottom: 20,
  },
  postCard: {
    backgroundColor: '#1a1a1a',
    borderRadius: 14,
    padding: 16,
    marginBottom: 20,
  },
  userRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  avatar: {
    width: 40,
    height: 40,
    borderRadius: 20,
    marginRight: 10,
  },
  creator: {
    color: '#fff',
    fontWeight: '600',
    fontSize: 14,
  },
  time: {
    color: '#aaa',
    fontSize: 12,
  },
  text: {
    color: '#ddd',
    fontSize: 14,
    marginBottom: 10,
  },
  postImage: {
    width: '100%',
    height: 200,
    borderRadius: 10,
    marginBottom: 10,
  },
  actions: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  actionText: {
    color: '#aaa',
    fontSize: 13,
  },
});
